<template>
    <div id="app">
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive" @changeActiveBar="changeActiveBar"/>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive" @changeActiveBar="changeActiveBar"/>
        <van-tabbar v-model="active" class="nav" v-show="$route.meta.navShow">
            <van-tabbar-item icon="wap-home" to="/home">首页</van-tabbar-item>
            <van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item>
            <van-tabbar-item icon="cart-o" to="/cart">购物车</van-tabbar-item>
            <van-tabbar-item icon="contact" to="/user">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
    import {Tabbar, TabbarItem} from "vant";

    export default {
        components: {
            [Tabbar.name]: Tabbar,
            [TabbarItem.name]: TabbarItem
        },
        data() {
            return {
                active: 0
            };
        },
        name: "app",
        methods: {
            changeActiveBar(val) {
                this.active = val;
            }
        }
    };
</script>
<style lang="less" scoped>
    @import "./assets/style/reset.css";
    @import "./assets/style/common.less";

    body {
        .font-dpr(14px);
    }

    /deep/
    a:link,
    a:visited,
    a:hover,
    a:active,
    a:focus {
        color: @fontColorP;
        text-decoration: none;
    }

    #app {
        background-color: @borderColor;
        /* 2020 520 修改样式 */
        height: 100%;
    }

    .van-tabbar-item--active {
        color: @priColor;
    }

    .van-tabbar {
        // border: 1px solid red;
        // height: 50px;
        /deep/ .van-icon {
            .font-dpr(22px);
        }
    }
</style>

